import React,{useState,useEffect} from 'react'
import './login.css'
import logo from '../../images/logo.png';
import { message } from 'antd';
import $ from 'jquery';
import axios from 'axios'


const Login = (props) => {
    const [username,setName]=useState('');
    const [passwd,setPasswd]=useState('');
    const [vercode,setVercode]=useState('');
    const [vernum,setVernum]=useState('');
    const [answer,setAnswer]=useState(0);

    useEffect(() => {
        getCode();
    },[])
    

    const login=()=>{
        
        var checkcode= $(".verCode").val();
        
        if(username==''){
            message.info('请输入用户名')
        }else if(passwd==''){
            message.info('请输入密码')
        }else if(vercode==''){
            message.info('请输入验证码')
        }else {
            if (answer!= checkcode) {
                $(".verCode").val('');
                message.info("验证码输入错误！");
                getCode();
                return;
            }else{
                axios.post('https://wx.xxmtcds.top:2333/adminlogin', 
                    {  adminname: username, adminpassword: passwd },
                   
                ) .then(function(response){
                    let token=response.data.token;
                    if(token){
                        localStorage.setItem('token', token);
                    }
                    
                    if(200===response.status){
                        message.info("登录成功！");
                        localStorage.setItem('isLogin','true');
                        props.history.replace(props.location.state||'/home')
                    }
                }).catch(err=>{
                    // console.log(err);
                    message.info("用户名或密码错误！");
                    getCode();
                })
            }
        }
    }

    const getCode=()=>{
        var arr = ['+','-','×'];
        var str = "";
        var num1=Math.floor(Math.random()*20);
        var num2=Math.floor(Math.random()*20);
        var symbol=arr[Math.floor(Math.random() * arr.length)];

        if(symbol=='+'){
            setAnswer(num1+num2);
        }else if(symbol=='-'){
            setAnswer(num1-num2);
        }else{
            setAnswer(num1*num2);
        }
        str+=num1+symbol+num2;
        setVernum(str);
    }  

    const changeVerCode=(e)=>{
        if(13===e.keyCode){
            login();
        }
    }
    return (
    
        <div className="outer">
            <div className="titleLogo"><img className="logo" src={logo}/></div>   
            <div className="innerContainer">
                <div>
                    <div className="myInformation">               
                        <div>用户名：<input type="text" name="adminname" value={username} 
                        onChange={e=>setName(e.target.value)}/> </div>
                        <div> 密&nbsp;&nbsp;&nbsp;码：<input name="adminpassword" 
                        type="password" value={passwd} onChange={(e)=>setPasswd(e.target.value)}/></div>
                        <div> 
                            验证码：<input type="text" name="adminpw" className="verCode"
                             value={vercode} onKeyUp={changeVerCode}  onChange={(e)=>setVercode(e.target.value)}/>
                            <div className="identifying">
                                {vernum}
                            </div>
                            <a href="#" id="toggle" onClick={getCode}>我不会，请换一个</a>
                        </div>
                            <button className="login" onClick={login}>登录</button>
                    </div>
                </div> 
            </div>
        </div>
      
    )
}

export default Login
